<template>
  <div class="z-home-bar">
    <el-tabs v-model="tagsActive" @tab-remove="removeTab" type="card">
      <el-tab-pane
        :key="item.id"
        v-for="item in tags"
        :label="item.name"
        :name="item.id"
        :closable="item.closable"
      >
      </el-tab-pane>
    </el-tabs>
    <router-view></router-view>
  </div>
</template>
<script setup>
import {
  ref,
  reactive,
  // defineEmits,
  // defineProps,
  // defineExpose, // 暴露给父组件
  //   useVuex,
  //   useRoute,
  watch,
} from "vue";
import { useRouter } from "vue-router";

let emit = defineEmits(["clickTag", "clickClose"]);
let props = defineProps({
  tags: {
    type: Array,
  },
  tagsActive: {
    type: String,
  },
});
let tagsName = ref("");
const router = useRouter();

watch(props, (propsVal) => {
  let item = propsVal.tags.find((item) => {
    return item.id == propsVal.tagsActive;
  });
  //
  if (item) {
    tagsName.value = item.name;
    router.push(item.path ? item.path : "/");
  }
});

function handleItem(item) {
  emit("clickTag", item);
}
function removeTab(item) {
  console.log(item);
  emit("clickClose", item);
}
defineExpose({
  someMsg() {
    console.log("我把事件暴露出去了");
  },
});
</script>